<template>
	<view class="index">
		<view class="logo padding-l-r flex">
			<image class="image" src="https://mini-program.ks3-cn-shanghai.ksyuncs.com/images/555d4742e06e9d078534c14a12eb6b567345a03f.png"  mode="widthFix"></image>
			<view class="text u-flex u-flex-items-center">
				<text class="main">方天下国旅</text>
				<text class="dot">·</text>
				<text class="sub">聚会</text>
				<text class="dot">·</text>
				<text class="sub">旅游</text>
			</view>
			
		</view>
		
		<view class="search padding-l-r">
			<u-search shape="round" :showAction="true" :disabled="true" :searchIconSize="52" :height="60" @click="goSearch"></u-search>
		</view>
		
		<view class="padding-l-r" v-if="liveInfo.status==2">
			<view class="live-wrap flex" @click="openChannelsLive">
				<view class="live-info flex">
					<u-avatar :src="liveInfo.headUrl" size="80" shape="circle"></u-avatar>
					<view class="live-name">
						<u-text :text="liveInfo.description" :lines="1" :size="30" bold></u-text>
					</view>
				</view>
				<view class="live-btn flex">
					<view class="spinner flex">
						<view class="rect1"></view>
						<view class="rect2"></view>
						<view class="rect3"></view>
					</view>
					<text>直播中</text>
				</view>
			</view>
		</view>
		
		<view class="swiper padding-l-r">
			<u-swiper
				:list="banners"
				keyName="cover"
				circular
				:height="220"
				:autoplay="true"
				radius="14"
				bgColor="#ffffff"
				@click="bannerJump"
			></u-swiper>
		</view>
		
		<u-gap height="16" bgColor="#f2f2f2"></u-gap>
		
		<view class="icon-recomand padding-l-r flex">
			<view class="icon-recomand-item flex" :style="{width: iconRecomandItemWidth + 'rpx'}" v-for="(item,index) in iconRecomandList" :key="index" @click="goRecomandPage(item.id)">
				<image class="image" :src="item.icon"></image>
				<text class="text">{{ item.title }}</text>
			</view>
		</view>
		
		<u-gap height="16" bgColor="#f2f2f2"></u-gap>
		
		<!-- 文字推荐位数据 -->
		<view class="text-recommand-list padding-l-r">
			<view class="text-recommand-list-item" v-for="(item,key) in textRecomandList" :key="key">
				<view class="header-title flex">
					<view class="indicator"></view>
					<view class="main">{{ item.title }}</view>
					<view class="sub">· {{ item.subtitle }}</view>
				</view>
				
				<ftx-routes :routesList="item.routes" :renderNums="3"></ftx-routes>
				<view class="view-more" v-if="item.routes.length>3" @click="goRecomandPage(item.id)">查看更多</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { indexBanners,recomandIcons,recomandTexts } from '@/api/api.js'
	import config from '@/utils/config'
	export default {
		data() {
			return {
				activeTextRecomandIndex: 0,
				iconRecomandList: [],
				iconRecomandItemWidth: 160,
				banners: [],
				textRecomandList: [],
				finderUserName: config.finderUserName,
				liveInfo: {
					feedId: '',
					nonceId: '',
					description: '',
					status: 0,
					headUrl: ''
				},
				spread_uid: uni.getStorageSync('ftxUserId') || 0
			}
		},
		// 分享给朋友
		onShareAppMessage: function () {
		    const promise = new Promise(resolve => {
				resolve({
				  title: config.appName,
				  path: `/pages/index/index?spread_uid=${this.spread_uid}`
				})
			})
			return {
			  title: '',
			  path: '/pages/index/index',
			  promise 
			}
		},
		// 分享到朋友圈
		onShareTimeline: function () {
			return {
			  title: config.appName,
			  query: 'spread_uid='+this.spread_uid
			}
		},
		onLoad(options) {
			let sales_uid = options.sales_uid || 0
			if ( sales_uid > 0 ) {
				uni.setStorageSync('ftxSpreaderSalesUid' , sales_uid)
			}
			
			let spread_uid = options.spread_uid || 0
			if ( spread_uid > 0 ) {
				uni.setStorageSync('ftxSpreaderUid' , spread_uid)
			}
		},
		mounted() {
			this.getBanners()
			this.getIcons()
			this.getTexts()
			console.log('this.spread_uid',this.spread_uid)
			// #ifdef MP
			var _this = this
			wx.getChannelsLiveInfo({
				finderUserName: this.finderUserName,
				success(res) {
					_this.liveInfo.feedId = res.feedId
					_this.liveInfo.nonceId = res.nonceId
					_this.liveInfo.description = res.description
					_this.liveInfo.status = res.status
					_this.liveInfo.headUrl = res.headUrl
				},
				fail(error) {
					console.log(error)
				}
			})
			// #endif
		},
		methods: {
			clickTextRecommand(item,index) {
				this.activeTextRecomandIndex = index
			},
			goSearch() {
				uni.navigateTo({
					url: '/pagesA/pages/search/search',
				});
			},
			getBanners() {
				indexBanners().then(res => {
					this.banners = res.data
				})
			},
			getIcons() {
				recomandIcons().then(res => {
					this.iconRecomandList = res.data
					
					this.iconRecomandItemWidth = 690 / (this.iconRecomandList.length/2)
				})
			},
			getTexts() {
				recomandTexts().then(res => {
					this.textRecomandList = res.data
				})
			},
			goRecomandPage(recomandId) {
				uni.navigateTo({
					url: `/pages/routes/recomand?id=${recomandId}&level=2`
				})
			},
			openChannelsLive() {
				// #ifdef MP
				if ( this.liveInfo.status == 2 ) {
					var _this = this
					wx.openChannelsLive({
						finderUserName: _this.finderUserName,
						feedId: _this.liveInfo.feedId,
						nonceId: _this.liveInfo.nonceId,
						success(res) {
							console.log(res)
						},
						fail(error) {
							console.log(error)
						}
					})
				}
				// #endif
			},
			bannerJump(bannerIndex) {
				let banner = this.banners[bannerIndex] || null
				if ( !banner ) return 
				
				let relType = banner.rel_type || ''
				let relId   = banner.rel_id || 0
				let mp_path   = banner.mp_path || 'pages/index/index'
				if ( relId > 0 ) {
					// 线路
					if ( relType == 1 ) {
						uni.navigateTo({
							url: `/pages/routes/details?route_id=${relId}`
						})
					}
					// 线路
					if ( relType == 2 ) {
						uni.navigateTo({
							url: `/pages/mall/details?goodsId=${relId}`
						})
					}
					// 图标推荐位
					if ( relType == 3 ) {
						uni.navigateTo({
							url: `/pages/routes/recomand?id=${relId}`
						})
					}
					// 文字推荐位
					if ( relType == 4 ) {
						uni.navigateTo({
							url: `/pages/routes/recomand?id=${relId}`
						})
					}
					// 自定义
					if ( relType == 5 ) {
						let isTab = false
						let tabs = ['index','living','mall','my']
						for (let i=0; i<tabs.length;i++) {
							if ( mp_path.indexOf(tabs[i]) > -1 ) {
								isTab = true;
								break;
							}
						}
						
						if ( isTab ) {
							uni.switchTab({
								url: mp_path
							})
						} else {
							uni.navigateTo({
								url: mp_path
							})
						}
						
					}
				}
				console.log(banner)
			}
		}
	}
</script>

<style lang="scss">
.index {
	font-size: 30rpx;
	padding:40rpx 0rpx;
	.logo {
		align-items: center;
		.image {
			width: 70rpx;
			height: 70rpx;
			margin-right: 16rpx;
			border-radius: 10rpx;
		}
		.text {
			font-size: 13px;
			.main {
				font-size: 15px;
				font-weight: bold;
			}
			.dot {
				margin: 0 6rpx;
				font-weight: bold;
				color: $uni-text-color-placeholder;
			}
			.sub {
				color: $uni-text-color;
			}
		}
	}
	.search {
		margin-top: 30rpx;
	}
	.live-wrap {
		margin-top: 30rpx;
		background-color: #ff5a5f52;
		border-radius: 20rpx;
		padding: 30rpx;
		justify-content: space-between;
		align-items: center;
		.live-info {
			align-items: center;
			.live-name {
				flex: 1;
				margin: 20rpx;
			}
		}
		.live-btn {
			align-items: center;
			background-color: #ff5a5f;
			border-radius: 14rpx;
			width: 160rpx;
			height: 60rpx;
			@include flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-size: 28rpx;
		}
	}
	.swiper {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	.icon-recomand {
		margin-top: 30rpx;
		flex-wrap: wrap;
		color: #909399;
		justify-content: space-between;
		.icon-recomand-item {
			width: 160rpx;
			flex-direction: column;
			align-items: center;
			margin-bottom:30rpx;
			font-size: 28rpx;
			.image {
				width: 110rpx;
				height: 110rpx;
				margin-bottom: 12rpx;
				border-radius: 20%;
			}
			.text {
				color: #333;
				font-size: 13px;
				font-weight: bold;
			}
		}
	}
	.text-recommand {
		flex-wrap: nowrap;
		padding: 18rpx 0;
		.active {
			.text {
				color: #ff5a5f;
			}
		}
		.text-recomand-item {
			padding: 10rpx 20rpx;
			font-size: 34rpx;
			flex-direction: column;
			align-items: center;
			.text {
				margin-bottom: 10rpx;
				padding: 0 10rpx;
				white-space: nowrap;
			}
		}
	}
	
	.text-recommand-list {
		margin-top: 30rpx;
		.text-recommand-list-item {
			.header-title {
				align-items: center;
				.indicator {
					width: 12rpx;
					height: 40rpx;
					background-color: $uni-primary-main;
					border-radius: 10rpx;
					margin-right: 14rpx;
				}
				.main {
					font-size: 36rpx;
					margin-right: 10rpx;
				}
				.sub {
					font-size: 28rpx;
					color: #999;
				}
			}
			.view-more {
				background-color: #21950826;
				border-radius: 20rpx;
				color: $uni-primary-main;
				text-align: center;
				padding: 16rpx 0;
				margin-bottom: 30rpx;
			}
		}
	}
}

.spinner {height: 20rpx;align-items: flex-end; margin-right: 10rpx;}
.spinner>view {
	background-color: #ffffff;
	height: 100%;
	width: 6rpx;
	margin-right: 4rpx;
	animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
	animation-delay: -1.1s;
}

.spinner .rect3 {
	animation-delay: -1.0s;
}
.spinner .rect4 {
	animation-delay: -0.9s;
}

@-webkit-keyframes stretchdelay {
	0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
	20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
	10% {
		height: 10%;
	}

	15% {
		height: 30%;
	}

	5% {
		height: 100%;
	}

	32% {
		height: 70%;
	}

	36% {
		height: 30%;
	}

	48% {
		height: 40%;
	}

	60% {
		height: 5%;
	}

	80% {
		height: 30%;
	}

	88% {
		height: 60%;
	}

	100% {
		height: 90%;
	}
}
</style>
